<template>
  <div class="order-details">
    <div class="order-content">
      <img :src="imgTitle" alt />
      <nut-infiniteloading
        @loadmore="onInfinite"
        :use-window="false"
        :is-show-mod="true"
        :has-more="isHasMore"
        :is-loading="isLoading"
        :threshold="200"
      >
        <ul class="list">
          <li class="list-item" v-for="(item, index) of data" :key="index">
            <div class="list-item-content">封底/封面</div>
            <img :src="item.img" alt />
          </li>
        </ul>
      </nut-infiniteloading>
    </div>
  </div>
</template>

<script>
export default {
  name: "CardVolume",
  data() {
    return {
      imgTitle: require("../../assets/image/details_order.png"),
      imgUrl: require("../../assets/image/img1.png"),
      data: [
        {
          img: require("../../assets/image/img1.png")
        },
        {
          img: require("../../assets/image/img2.png")
        },
        {
          img: require("../../assets/image/img3.png")
        },
        {
          img: require("../../assets/image/img4.png")
        },
        {
          img: require("../../assets/image/img5.png")
        },
        {
          img: require("../../assets/image/order6.jpg")
        },
      ],
      page: 2,
      num: 30,
      isHasMore: true,
      isLoading: false,
      isErr: false,
      timer: null,
    };
  },
  methods: {
    onInfinite() {
      console.log("aa");
      this.isLoading = true;
      this.timer = setTimeout(() => {
        if (this.page <= 5) {
          this.dataList = this.dataList.concat(this.dataList);
          this.page = this.page + 1;
        } else {
          this.isHasMore = false;
        }
        this.isLoading = false;
      }, 100);
    },
  },
  destroyed() {
    clearTimeout(this.timer);
  },
};
</script>

<style scoped lang="scss">
.order-details {
  background-color: #ececec;
  height: 100%;
  padding: 20px;
}
.order-content img {
  width: 100%;
}
.list-item-content {
  font-size: 16px;
  padding: 10px;
  text-align: center;
}
</style>
